import { Link, Contribution } from '@brillout/docpress'
import { UiFrameworkExtension } from '../../../components'
import { BlogHeader } from '../../blog/BlogHeader'

<BlogHeader authors={['brillout']} date={new Date('2024-07-01')} />

What we have been working on in June 2024.

<Contribution>
  We are [looking for sponsors](https://github.com/vikejs/vike/issues/1350).
</Contribution>


**Fixes:** `48`

**Features**

<Link href="#improved-nested-layouts" /><br/>
<Link href="#pages-marketing" /><br/>
<Link href="#client-js" /><br/>
<Link href="#clientonly" /><br/>
<Link href="#pagecontext-headersoriginal" /><br/>
<Link href="#bodyhtmlbegin-bodyhtmlend" /><br/>
<Link href="#vike-cloudflare" /><br/>
<Link href="#new-bati-integrations" /><br/>
<Link href="#new-capabilities-for-extensions" /><br/>
<Link href="#universal-handlers" /><br/>

**Performance**

<Link href="#slimmer-client" /><br/>

**Project**

<Link href="#improved-docs" /><br/>
<Link href="#new-marketing" /><br/>
<Link href="#getting-close-to-1-0-0" /><br/>
<Link href="#roadmap" /><br/>

**See also**

[`vike` > `CHANGELOG.md`](https://github.com/vikejs/vike/blob/main/CHANGELOG.md)  
[`vike-react` > `CHANGELOG.md`](https://github.com/vikejs/vike-react/blob/main/packages/vike-react/CHANGELOG.md)  
[`vike-vue` > `CHANGELOG.md`](https://github.com/vikejs/vike-vue/blob/main/packages/vike-vue/CHANGELOG.md)  
[`vike-solid` > `CHANGELOG.md`](https://github.com/vikejs/vike-solid/blob/main/CHANGELOG.md)  


## Improved Nested Layouts

Vike has now first-class support for nested layouts.

```yaml
# Outer layout, common to all pages
pages/+Layout.js
# Layout for product page
pages/product/@id/+Layout.js
# Nested view
pages/product/@id/pricing/+Page.js
# Nested view
pages/product/@id/reviews/+Page.js
```

See <Link href="/Layout#nested" />.

<Contribution>
  Authors: [`Blankeos`](https://github.com/Blankeos), [`brillout`](https://github.com/brillout)
</Contribution>


## `pages/(marketing)/`

You can now organize your pages into groups:

```yaml
FILESYSTEM                             URL
================================       ==================
pages/(marketing)/index/+Page.js       /
pages/(marketing)/about/+Page.js       /about
pages/admin-panel/index/+Page.js       /admin-panel
pages/admin-panel/users/+Page.js       /admin-panel/users
```
> The directory `(marketing)` is ignored because it's wrapped by parentheses.

Beyond improved organization, it enables you to apply different configurations to different pages.

See: <Link href="/routing#groups" />.

<Contribution>
  Author: [`brillout`](https://github.com/brillout)
</Contribution>


## `+client.js`

You can now define a `+client.js` file which defines the first client-side code that is executed.

It's convenient for initializing error tracking, user tracking, vanilla CSS tools, etc.

See <Link href="/client" />.

<Contribution>
  Author: [`brillout`](https://github.com/brillout)
</Contribution>


## `clientOnly()`

Vue users can now use the <Link href="/clientOnly">`clientOnly()`</Link> helper which has the same functionality as the `<ClientOnly>` wrapper (now deprecated) but with a much improved DX.

<Contribution>
  Author: [`pdanpdan`](https://github.com/pdanpdan)
</Contribution>

Solid users already had `clientOnly()` and there is a feature request for `vike-react`.

<Contribution>
  Contributions welcome: [vikejs/vike-react#102 - `clientOnly()` instead of `<ClientOnly>`](https://github.com/vikejs/vike-react/issues/102)
</Contribution>


## `pageContext.headersOriginal`

There is now an official way to pass the HTTP request headers:

```ts
import { renderPage } from 'vike/server'

// Server middleware
app.get('*', async (req: Request) => {
  const pageContextInit = {
    urlOriginal: req.url,
    headersOriginal: req.headers
  }
  const pageContext = await renderPage(pageContextInit)
  // ...
})
```

Like `pageContext.urlOriginal` and `pageContext.urlParsed` (`pageContext.urlParsed` will be renamed `pageContext.url` in the next major release), the `pageContext.headersOriginal` contains the untouched original headers object you passed to `renderPage()` while `pageContext.headers` is a convenient normalized object of strings (`Record<string, string>`).

See: <Link href="/headers#request" />.

<Contribution>
  Author: [`brillout`](https://github.com/brillout)
</Contribution>


## `bodyHtmlBegin`/`bodyHtmlEnd`

With Vue, a common need is to insert the HTML of teleports. You can now do that with following new settings:
- <Link href="/bodyHtmlBegin" />
- <Link href="/bodyHtmlEnd" />

<Contribution>
  Author: [`4350pChris`](https://github.com/4350pChris)
</Contribution>


## vike-cloudflare

The new package [vike-cloudflare](https://github.com/vikejs/vike-cloudflare) enables you to use Cloudflare Pages with workers in a zero-config fashion.

> Soon, with the upcoming [Vite Runtime API](https://github.com/vitejs/vite/pull/16471), you will be able to develop directly against the [Cloudflare workerd runtime](https://github.com/cloudflare/workerd). In other words: no more runtime discrepancy between dev and prod!

<Contribution>
  Author: [`magne4000`](https://github.com/magne4000)
</Contribution>


## New Bati integrations

New [Bati](https://batijs.dev) integrations:
 - [Drizzle ORM](https://orm.drizzle.team)
 - [ts-rest](https://ts-rest.com)

<Contribution>
  Author: [`phonzammi`](https://github.com/phonzammi), [`magne4000`](https://github.com/magne4000)
</Contribution>


## New capabilities for extensions

There have been many internal structural improvements for adding new capabilities to Vike extension, for example:
- Cumulative hooks.
- Extensions can declare hard dependencies.
  > For example, `vike-vue-pinia` now declares its dependency on `vike-vue>=0.7.6` and `vike>=0.4.174`: any unmet dependency throws an error. (Unlike `peerDependencies` warnings which are usually ignored.)
- <Link href="/getPageContext" /> powering the upcoming "universal" hooks such as `useConfig()`.

<Contribution>
  Author: [`brillout`](https://github.com/brillout)
</Contribution>


## Universal Handlers

We've been prototyping on [Universal Handlers](https://github.com/magne4000/universal-handler) to enable Vike extensions to automatically integrate the server middlewares of tools.

<Contribution>
  Author: [`magne4000`](https://github.com/magne4000)
</Contribution>


## Slimmer client

In order to save client-side KBs, we started removing client code such as:
- [Client-side validation](https://github.com/vikejs/vike/commit/9168c5be9342e4adcfa3d42c7d5c10a09f3ac513).
  > The downside is that some errors will be silent or less helpful, but we believe it's worth it.
- `assert()` calls.
  > The code had *many* `assert()` calls which were helpful for fixing bugs, but we need them less now that the client runtime is stabilizing.

<Contribution>
  Author: [`brillout`](https://github.com/brillout)
</Contribution>


## Improved docs

We are continuously improving the documentation.

For example:
- Rewritten <Link href="/guard" /> docs explaining when and where `guard()` is called, with new guides about limitations and workarounds.
- Rewritten <Link href="/data-fetching" /> docs covering all common use cases, with clearer recommendations.
- Rewritten <Link href="/data#environment" /> docs, explaining how and when to change the environment of `data()`.
- Rewritten integration guides for stores and data tools, e.g. <Link href="/pinia#initial-state" />.
- <UiFrameworkExtension succinct /> are now fully documented on `vike.dev`.
- ...

<Contribution>
  Author: [`brillout`](https://github.com/brillout)
</Contribution>


## New marketing

We are starting to focus on marketing and advertising Vike.

We started writing a new page <Link href="/why" />, which will eventually be the long-form version of the new marketing copy.

We're also working on:
- A `vike.dev` facelift to make the website aesthetically more pleasing.
- A completely new landing page for `vike.dev`.

<Contribution>
  Author: [`brillout`](https://github.com/brillout)
</Contribution>


## Getting close to `1.0.0`

The three major reasons we aren't releasing `1.0.0` are:

1. [x] Nested Layouts.
2. [ ] Use Vite to transpile server code.
3. [ ] A major announcement we'll unveil later this sommer.
   > The announcement will be pivotal to the project. Stay tuned.

Now that Nested Layouts are done, we're getting close to the [`1.0.0` release](https://github.com/vikejs/vike/issues?q=is%3Aissue+is%3Aopen+label%3A%22v1+release+%3Astar2%3A%22).


## Roadmap

Major features we're currently working on:

- Improved head management DX for <UiFrameworkExtension succinct />.
- [Prefetching of `pageContext`](https://github.com/vikejs/vike/issues/246).
- Vike CLI.
  > Replacing the Vite CLI is a foundational change enabling a lot of upcoming features.
- Use Vite to transpile server code.
  > Including standalone server builds, and development directly against edge runtimes (e.g. [Cloudflare's workerd](https://github.com/cloudflare/workerd)).

  <Contribution>
    Author: [`nitedani`](https://github.com/nitedani)
  </Contribution>
- Improve `vike.dev` aesthetics and UX. (We already have a new design in mind, which we'll implement after we finish all [`highest-priority` tickets](https://github.com/vikejs/vike/issues?q=is%3Aissue+is%3Aopen+label%3A%22highest-prio+%F0%9F%94%A5%22).)


## See also

- [`vike` > `CHANGELOG.md`](https://github.com/vikejs/vike/blob/main/CHANGELOG.md)
- [`vike-react` > `CHANGELOG.md`](https://github.com/vikejs/vike-react/blob/main/packages/vike-react/CHANGELOG.md)
- [`vike-vue` > `CHANGELOG.md`](https://github.com/vikejs/vike-vue/blob/main/packages/vike-vue/CHANGELOG.md)
- [`vike-solid` > `CHANGELOG.md`](https://github.com/vikejs/vike-solid/blob/main/CHANGELOG.md)
- <Link href="/releases" />
